
@extends('common.header')
<head>
<!-- 1.添加meta csrf_token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>我的关注</title>
<link rel="shortcut icon" href="{{ asset('/images/favicon.ico') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('/css/person/person-center.css') }}"/>
<script src=" {{ asset('/js/jquery-1.9.1.min.js') }} "></script>
<script>

	<!-- 设置全局ajax选项 -->
	$.ajaxSetup({
		headers:{
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		}
	});
	
	// 获取 token
	var _token = $('meta[name="csrf-token"]').attr('content');
	
	

	
	
	// 页数等于 1
	var followpage = 2;
	var fanspage = 2;
	// 是否 加载
	var isLoading = true;
	
	$(window).scroll(function()
	{
		// 窗口高度
		var wH = $(window).height();
		
		// 滚动条高度
		var sH = $(window).scrollTop();

		// 文本高度
		var dH = $(document).height();

		if(wH + sH < dH )
		{
			return;
		}

		run();

	});
	// 加载 文章
	function run()
	{
		if( !isLoading )
		{
			return;
		} 

		isLoading = false;
		var text =  $('.active').html();
		switch( text )
		{
			// 关注
			case '关注':
				var dizhi = "{{ url('/followpubuliu') }}";
				var pagen = followpage;
			break;
			// 粉丝
			case '粉丝':
				var dizhi ="{{ url('/fanspubuliu') }}";
				var pagen = fanspage;
			break;
		}
		$.ajax({
			type: "post",
			url: dizhi,
			data: { page:pagen, _token: _token },
			async: true,
			dataType:"json",
			success:function(back)
			{
				if( back['show_info'] && back['show_info']=='已全部加载' )
				{
					isLoading=false;
					$("#allLoad").append("<span style='display:inline-block;width:100%;text-align:center;' >"+back['show_info']+"</span>" );
					$("#allLoadFans").append("<span style='display:inline-block;width:100%;text-align:center;' >"+back['show_info']+"</span>" );
					return false;
				}
				switch( text )
				{
					// 关注
					case '关注':
						for(i=0;i<back.length;i++)
						{
							var html = '';
							html += "<li>";
								html += "<a href=\"{{ url('/showcenter') }}/"+back[i]['follow_id']+"\" class='head'>";
									html += "<img src='"+back[i]['pic_url']+"' alt=''>";
								html += "</a>";
								html += "<div class='name'>";
									html += "<a href=\"{{ url('/showcenter') }}/"+back[i]['follow_id']+"\"><span>"+back[i]['name']+"</span></a>";
									html += "<a href='#'><span>"+''+"</span></a>";
								html += "</div>";
								html += "<a href='#' class='btn'>已关注</a>";
								html += "<div class='focus_hidde'>";
									html += "<i><span></span></i>";
									html += "<ul>";
										html += "<li><a href='#'>取消关注</a></li>";
									html += "</ul>";
								html += "</div>";
							html += "</li>";
							
							$("#allLoad").append(html);
						}
						followpage ++;
					break;
					// 粉丝
					case '粉丝':
						for(i=0;i<back.length;i++)
						{
						
							var html = '';
							html += "<li>";
								html += "<a href=\"{{ url('/showcenter') }}/"+back[i]['uid']+"\" class='head'>";
									html += "<img src="+back[i]['pic_url']+" alt=''>";
								html += "</a>";
								html += "<div class='name'>";
									html += "<a href=\"{{ url('/showcenter') }}/"+back[i]['uid']+"\"><span>"+back[i]['name']+"</span></a>";
									html += "<a href='#'><span>"+back[i]['desc']+"</span></a>";
								html += "</div>";
								html += "<a href='#' class='btn active'>已关注</a>";
							html += "</li>";
							
							$("#allLoadFans").append(html);
						}
						fanspage ++;
					break;
				}
				
				isLoading = true;
			}
		});

	}

	
	
	// +关注
	function addFollow( follow )
	{
		$.ajax({
			type: "post",
			url: "{{ url('/addfollow') }}",
			data: {follow_id:follow,_token: _token},
			async: true,
			dataType: "json",
			success:function (back){
				if(back['show_info']=='关注成功')
				{
					window.location.reload();
				}else
				{
					alert(back['show_info']);
				}
			}
	
		
		})
	}
	
	// 取消关注窗口
	var ishidden = '123';
	var isshow = '123';
	function cancleshow( follow_id,type )
	{
		
		switch(type)
		{
		
			case '1':
				// 我的关注
				$("div[id*='cancleguanzhu_']").hide();
				if( ishidden=='123' )
				{
					$("#cancleguanzhu_"+follow_id).show();
					ishidden = '456';
				}else
				{
					$("#cancleguanzhu_"+follow_id).hide();
					ishidden = '123';
				}
			break;
			case '2':
				// 我的粉丝
				if( isshow=='123' )
				{
					$("#quxiaofans_"+follow_id).show();
					isshow = '456';
				}else
				{
					$("#quxiaofans_"+follow_id).hide();
					isshow = '123';
				}
			break;
		}
		
	}
	

	
	
	
	
	
	
	
	
	// 粉丝取消关注
    function quFollow( follow )
	{
        $.ajax({
            type: "post",
            url: "{{ url('/canclefollow') }}",
            data: {follow_id:follow,_token: _token},
            async: true,
            dataType: "json",
            success:function (back){
                if(back['show_info']=='取消关注成功')
                {
                    window.location.reload();
                }else
                {
                    alert(back['show_info']);
                }
            }

        })
    }
	
	


</script>
</head>
<body>


<!--面包屑导航-->
<div style="width: 1200px;height: 40px;line-height:40px;position: relative;margin: 110px auto 0">
    <ol style="float: left;overflow: hidden;color: #333;list-style: none;">
        <li style="float: left;margin-left: 5px">当前位置：</li>
        <li style="float: left;margin-left: 5px"><a href="/" style="color: #de1e30;margin-left: 5px">首页</a>
        </li>
        <li style="float: left;margin-left: 5px"><a href="{{ url('/personNal') }}" style="color: #de1e30;margin-left: 5px">>
            个人中心</a></li>
        <li style="float: left;margin-left: 5px">> 我的资料</li>
    </ol>
</div>

<div class="wrap" style="margin-top:10px">
    <!--左侧标题-->
    <div class="left_menu">
        <div class="menu_block admin" >
            <a href="{{ url('/personNal') }}" class="menu_article">
                <i></i>
                我的资料
            </a>	
        </div>
		<div class="menu_block admin_change_img">
            <a href="{{ url('/changuserpic') }}" class="menu_article">
                <i></i>
                修改头像
            </a>
        </div>
		<div class="menu_block admin-focus" style="background:#eee">
            <a href="{{ url('/myfans') }}" class="menu_article">
                <i></i>
                我的关注
            </a>
        </div>
		<div class="menu_block article-manage">
			<a href="{{ url('/articleManage') }}" class="menu_article">
				<i></i>
				文章管理
			</a>
		</div>
		<div class="menu_block menu_recharge">
            <a href="{{ url('/recharge') }}" class="menu_article">
                <i></i>
                充值中心
            </a>
        </div>
		<div class="menu_block menu_recharge">
            <a href="{{ url('/recharge_record') }}" class="menu_article">
                <i></i>
                充值记录
            </a>
        </div>
		<div class="menu_block article-colle">
			<a href="{{ url('/mycollect') }}" class="menu_article">
				<i></i>
				我的收藏
			</a>
		</div>
        <div class="menu_block article-publi">
            <a href="{{ url('/new_article') }}" class="menu_article">
                <i></i>
                发表文章
            </a>
        </div>
		<div class="menu_block article-recommend">
            <a href="{{ url('/recommendgame') }}" class="menu_article">
                <i></i>
                竞彩推荐
            </a>
        </div>
    </div>
    
	
	<!--主要内容-->
	<div class="focus_main">
		<!--标题-->
		<div class="tab-tit" id="tab-tit">
			<a href="#" class="active" >关注</a>
			<a href="#">粉丝</a>
		</div>
		<!--<div class="tab-total">
			<span>合计：</span>
			<span><span>关注</span>1111</span>
			<span><span>粉丝</span>111</span>
		</div>-->
		
		
		
		<!--关注-->
		<ul class="focus tab-box">
		@forelse( $myFollow as $key => $guanzhu )
	
			<li>
				<a href='{{ url("/showcenter") }}/{{ $guanzhu->follow_id }}' class='head'>
					<img src="{{ $guanzhu->pic_url }}" alt="">
				</a>
				<div class='name'>
					<a href='{{ url("/showcenter") }}/{{ $guanzhu->follow_id }}'><span>{{ $guanzhu->name }}</span></a>
					<a href='#'><span>{{ $guanzhu->desc }}</span></a>
				</div>
				
				<a href='#' class='btn focus-on' onclick="cancleshow( {{ $guanzhu->follow_id }},'1' )"> 已关注</a>
				
				<!-- 取消关注窗口 -->
				<div class="focus_hidde" id="cancleguanzhu_{{ $guanzhu->follow_id }}" onclick="quFollow( {{ $guanzhu->follow_id }} )">
					<i><span></span></i>
					<ul>
						<li><a href="#">取消关注</a></li>
					</ul>
				</div>
			</li>
		@empty
		<!--没有文章时显示-->
		<div class="none_article">
			<img src="{{ asset('/images/articles/nothing.png') }}" alt="">
			<p>您还没有关注任何人哦！！</p>
		</div>
		@endforelse	
			<div id="allLoad" style="width:100%;text-align:left;font-size:16px;color:#8a8a8a" ></div>
		
		</ul>
		
		
		
		
		
		<!--粉丝-->
		<ul class="fans tab-box">
		@forelse( $myFans as $key => $fans )
			<li>
				<a href='{{ url("/showcenter") }}/{{ $fans->uid }}' class='head'>
					<img src="{{ $fans->pic_url }}" alt="">
				</a>
				<div class='name'>
					<a href='{{ url("/showcenter") }}/{{ $fans->uid }}'><span>{{ $fans->username }}</span></a>
					<a href='#'><span>{{ $fans->desc }}</span></a>
                </div>
				
				@if( in_array( $fans->uid,$follow_arr ) )
                    <a class='btn' onclick="cancleshow( {{ $fans->uid }},'2' );" >已关注</a>
					
					<div class="focus_hidde" id="quxiaofans_{{ $fans->uid }}" onclick="quFollow( {{ $fans->uid }} )">
						<i><span></span></i>
						<ul>
							<li><a href="#">取消关注</a></li>
						</ul>
					</div>
                @else
                    <a class='btn active bto' id="guanzhu_{{ $fans->uid }}" onclick="addFollow({{ $fans->uid }} );" >关注</a>
                @endif
				
			</li>
		@empty
		<!--没有文章时显示-->
		<div class="none_article">
			<img src="{{ asset('/images/articles/nothing.png') }}" alt="">
			<p>还没有任何人关注你哦！！</p>
		</div>
		@endforelse	
			<div id="allLoadFans" style="width:100%;text-align:left;font-size:16px;color:#8a8a8a" ></div>
		</ul>
	
	</div>
	
</div>
<script>
   
	$(".tab-box").eq(0).show();
    $("#tab-tit a").eq(0).addClass("active");
    $("#tab-tit a").click(function(){
        var num =$("#tab-tit a").index(this);
        $("#tab-tit a").removeClass("active");
        $(this).addClass("active");
        $(".tab-box").hide();
        $(".tab-box").eq(num).show().siblings(".grid-info").hide();
    });
	
  

</script>
@extends('common.footer')
</body>
